<template>
	<div class="basic_wrap">
		<div class="red_top_bg">
			<div class="back_left" @click="$router.back()"></div>
			<div class="big_tit">{{ item.title }}</div>
		</div>
		<div class="item_info_bg"></div>
		<div class="block_div item_info info1">
			<div class="img">
				<video width="100%" :src="item.video" :poster="item.cover" controls>
					您的浏览器不支持Video标签。
				</video>
			</div>
		</div>
		<div class="block_div item_detail">
			<div class="item_title">
				{{ item.title }}
			</div>
			<div class="item_sub_title">
				{{ item.sub_title }}
			</div>
			<div class="content" v-html="item.detail"></div>
		</div>
	</div>
</template>

<script>
import bsHeader from '../../components/bsHeader.vue'
import Fetch from '../../utils/fetch'
export default {
	name: "",
	components: {
		bsHeader
	},
	data() {
		return {
			data: [],
			item: {
				cover: '',
				detail: '',
				video: '',
				image: '',
				sub_title: '',
				title: '',
				id: ''
			}
		};
	},
	created() {
		if (window.plus) {
			plus.navigator.setStatusBarBackground('#0F6EFF');
			plus.navigator.setStatusBarStyle('light');
		}
		this.$parent.footer('user', false);
	},
	mounted() {
		this.start();
	},
	methods: {
		start() {
			Fetch('/video/videoDetail', {
				id: this.$router.history.current.params.code
			}).then(r => {
				this.item = r.data.list;
			})
		}
	}
};
</script>

<style lang="less" scoped>
/deep/ .van-popup--bottom {
	right: 0;
	margin: 0 auto;
	max-width: 750px;
}

.proCharts {
	margin-bottom: 10px;
	padding-top: 15px;
	height: 268px;
}

.basic_wrap {
	margin-bottom: 60px;
}

.red_top_bg {
	background: #0F6EFF;
	position: fixed;
	z-index: 10;
	box-shadow: unset;

	.back_left {
		background: url(../img/common/back.png) no-repeat center center;
		width: 30px;
		height: 22px;
	}

	.big_tit {
		color: #FFFFFF;
		left: 55px;
	}
}

.item_info_bg {
	background: #0F6EFF;
	width: 100%;
	height: 168px;
	border-radius: 0 0 30px 30px;
}

.progress {
	margin: 10px 16px;
}

.item_title {
	line-height: 2;
	font-size: 16px;
	font-weight: bold;
	padding: 10px 15px;
}

.item_sub_title {
	padding: 5px 15px;
}

.logo {
	margin-bottom: 10px;

	img {
		width: 100%;
	}
}

.item_info {
	margin-bottom: 10px;

	.img {
		width: 100%;
	}

	.detail {
		padding: 10px 0;
		line-height: 2;

		.value_class {
			font-weight: bold;
			color: #3CB371;
		}
	}
}

.info1 {
	margin-top: -116px;
}

.popup_info {
	.title {
		text-align: center;
		padding: 16px;
	}

	.invest_amount {
		color: #999;
		padding: 15px 20px 0 0;
		font-size: 14px;
	}

	.invest_detail_wrap {
		width: 100%;
		margin: 0;
		justify-content: space-between;
		padding: 15px;
		border-top: 1px solid #F7F7F7;

		.detail_money {
			color: #FF0000;
			font-weight: bold;
			font-size: 16px;
			margin-left: 5px;
		}

		.sbtn {
			width: unset;
			height: unset;
			line-height: unset;
			padding: 5px 15px;
		}
	}
}

.item_detail {
	margin-bottom: 20px;

	.title {
		padding: 15px 0 10px 15px;
		font-size: 16px;
		border-bottom: 1px solid #F7F7F7;
	}

	.content {
		padding: 10px 15px 15px 15px;
		line-height: 2;

	}
}

.btn {
	position: fixed;
	margin: auto;
	left: 0;
	right: 0;
	bottom: 10px;
	max-width: 400px;
	width: 80%;
	text-align: center;
}

/deep/ .van-cell {
	font-size: unset;
	padding: 5px 16px;
}</style>
